<template>
  <div class="box">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="biaotou">
      <el-breadcrumb-item :to="{ path: '/index' }">
        <el-icon><House /></el-icon>首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>考勤规则</el-breadcrumb-item>
      <el-breadcrumb-item>全勤规则</el-breadcrumb-item>
      <el-breadcrumb-item>新增全勤规则</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="box-one">
      <el-icon><Star /></el-icon>
      <span>基本设置</span>
    </div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="规则名称" prop="proname">
        <el-input v-model="ruleForm.proname" />
      </el-form-item>
      <el-form-item label="适用范围" prop="radius">
        <el-input v-model="ruleForm.radius" type="textarea" />
      </el-form-item>
      <el-form-item label="通用设置" prop="delivery">
        <el-switch v-model="ruleForm.delivery" />
      </el-form-item>
      <el-form-item prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="无迟到" name="type" />
          <el-checkbox label="无早退" name="type" />
          <el-checkbox label="无矿工" name="type" />
          <el-checkbox label="无调休" name="type" />
          <el-checkbox label="无请假（非带薪假）" name="type" />
          <el-checkbox label="无请假（带薪假）" name="type" />
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div class="box-two">
      <el-button @click="fanhui">取消</el-button>
      <el-button type="primary" @click="baocun">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import * as service from "../../../api/liwei/liwei";
import { ElNotification } from "element-plus";
import "element-plus/es/components/notification/style/css";

var $router = useRouter();

var ruleFormRef = ref(null);
var ruleForm = ref({
  proname: "",
  radius: "",
  flag: true,
});

var rules = ref({
  proname: [{ required: true, message: "请输入规则", trigger: "change" }],
  radius: [{ required: true, message: "请输入范围", trigger: "change" }],
});

// 返回上一页
var fanhui = () => {
  $router.go(-1);
};

// 保存到数据库
var baocun = async () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      var res = await service.xinzen(ruleForm.value);
      console.log(res);
      ElNotification({
        title: "新增通知",
        message: "新增成功",
        type: "success",
        duration: 1000,
      });
      $router.back();
    }
  });
};
</script>

<style scoped lang="scss">
.box {
  .biaotou {
    font-size: 18px;
  }
  .demo-ruleForm {
    margin-top: 20px;
  }
  .el-input {
    max-width: 500px;
  }
  .el-textarea {
    max-width: 500px;
  }
  .box-one {
    font-size: 20px;
    margin-top: 20px;
    font-weight: 700;
    margin-left: 40px;
    // padding-left: 40px;
    padding-bottom: 10px;

    border-bottom: 1px solid;
  }
  .box-two {
    margin-left: 40px;
  }
}
</style>